PivotGrid - KBN - Add ARIA attributes to area fields by aleksei-semikozov · Pull Request #34341 · DevExpress/DevExtreme

aleksei-semikozov · 2026-07-16T13:23:18Z

No description provided.

Copilot

Pull request overview

This PR enhances PivotGrid (and the PivotGrid Field Chooser) keyboard-navigation accessibility by exposing area field containers as menubars and individual fields as menu items with localized ARIA labels, plus accompanying unit/e2e coverage.

Changes:

Update PivotGrid FieldsArea markup to conditionally expose populated areas as a labelled menubar while keeping empty areas presentational.
Add per-field role="menuitem" and computed aria-label that reflects caption + sort/header-filter state.
Add new localization message keys and extend QUnit/Jest/TestCafe coverage for the updated ARIA semantics.

Reviewed changes

Copilot reviewed 43 out of 43 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.markup.tests.js	Updates accessibility markup assertions for menubar behavior and empty filter-area behavior.
packages/devextreme/js/localization/messages/ar.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/bg.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/ca.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/cs.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/da.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/de.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/el.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/en.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/es.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/fa.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/fi.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/fr.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/hi.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/hu.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/it.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/ja.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/ko.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/lt.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/lv.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/nb.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/nl.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/pl.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/pt.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/pt-PT.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/pt-BR.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/ro.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/ru.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/sl.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/sv.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/tr.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/uk.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/vi.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/zh.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/zh-tw.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/zh-Hans.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/localization/messages/zh-CN.json	Adds new PivotGrid ARIA message keys.
packages/devextreme/js/__internal/grids/pivot_grid/fields_area/m_fields_area.ts	Implements conditional menubar exposure for populated PivotGrid field areas and presentational markup for empty areas.
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts	Applies conditional menubar role + aria-label to FieldChooser area containers only when fields are present.
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts	Sets `role="menuitem"` and computed `aria-label` on rendered field items.
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.ts	Introduces helper for composing localized field aria-labels with sort/filter state.
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.test.ts	Adds Jest coverage for aria-label composition logic.
e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fields.ts	Adds E2E assertions for menubar/menuitem roles and composed field aria-labels.

Copilot

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated no new comments.

sjbur · 2026-07-17T11:28:27Z

Bug: stale role="menubar"/aria-label after hiding a field area

FieldsArea._renderTableContent (fields_area/m_fields_area.ts) only resets role/aria-label inside the isVisible branch:

if (!isVisible) {
  return;
}
...
tableElement.attr('role', 'menubar').attr('aria-label', ...); // or 'presentation' + removeAttr

Since _tableElement is reused across re-renders (only innerHTML/style get cleared), calling e.g. pivotGrid.option('fieldPanel.showRowFields', false) after the row area had fields leaves the table with the old role="menubar" + aria-label, because the function returns early before the reset code runs.

Fix: reset before the early return:

     if (!isVisible) {
+      tableElement
+        .attr('role', 'presentation')
+        .removeAttr('aria-label');
       return;
     }

aleksei-semikozov · 2026-07-17T15:50:06Z

Good catch, thanks! Fixed in 745ab50.

Copilot

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated 1 comment.

PivotGrid - KBN - Add ARIA attributes to area fields

3025411

aleksei-semikozov added the 26_2 label Jul 16, 2026

aleksei-semikozov self-assigned this Jul 16, 2026

aleksei-semikozov marked this pull request as ready for review July 16, 2026 15:19

aleksei-semikozov requested review from a team as code owners July 16, 2026 15:19

Copilot AI review requested due to automatic review settings July 16, 2026 15:19

Copilot started reviewing on behalf of aleksei-semikozov July 16, 2026 15:20 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

PivotGrid - KBN - Fix ascending sort ARIA field message key typo

eaa4083

Copilot AI review requested due to automatic review settings July 16, 2026 16:14

Copilot started reviewing on behalf of aleksei-semikozov July 16, 2026 16:15 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

aleksei-semikozov commented Jul 16, 2026

View reviewed changes

vladaskorohodova previously approved these changes Jul 17, 2026

View reviewed changes

Merge branch 'main' into pivotgrid-kbn-fields-aria-attrs-main

ffafcff

Copilot AI review requested due to automatic review settings July 17, 2026 10:39

aleksei-semikozov dismissed vladaskorohodova’s stale review via ffafcff July 17, 2026 10:39

aleksei-semikozov requested review from vladaskorohodova and removed request for Copilot July 17, 2026 10:39

aleksei-semikozov enabled auto-merge July 17, 2026 11:09

sjbur disabled auto-merge July 17, 2026 11:28

PivotGrid - KBN - Reset stale menubar role on hidden field areas

745ab50

Copilot AI review requested due to automatic review settings July 17, 2026 15:49

Copilot started reviewing on behalf of aleksei-semikozov July 17, 2026 15:50 View session

Copilot AI reviewed Jul 17, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts

sjbur approved these changes Jul 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

PivotGrid - KBN - Add ARIA attributes to area fields#34341

PivotGrid - KBN - Add ARIA attributes to area fields#34341
aleksei-semikozov wants to merge 4 commits into
DevExpress:mainfrom
aleksei-semikozov:pivotgrid-kbn-fields-aria-attrs-main

aleksei-semikozov commented Jul 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sjbur commented Jul 17, 2026

Uh oh!

aleksei-semikozov commented Jul 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

aleksei-semikozov commented Jul 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sjbur commented Jul 17, 2026

Uh oh!

aleksei-semikozov commented Jul 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants